<template>
  <div class="sidebar">
    <div class="sidebar-header">
      <!-- 如果有logo或标题 -->
    </div>
    <ul class="nav-menu">
      <li 
        v-for="(item, index) in filteredMenuItems" 
        :key="index"
        class="nav-item"
        :class="{ active: activeMenu === item.path }"
        @click="navigateTo(item.path)"
      >
        <i :class="['nav-icon', item.icon]"></i>
        <span>{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { getAdminLevel } from '../utils/auth';

export default {
  name: 'Sidebar',
  data() {
    return {
      activeMenu: this.$route.path,
      menuItems: [
        { title: '总览', path: '/', icon: 'el-icon-s-home', roles: [0, 1] },
        { title: '设备列表', path: '/device', icon: 'el-icon-s-platform', roles: [0, 1] },
        { title: '设备监控', path: '/monitor', icon: 'el-icon-monitor', roles: [0, 1] },
        { title: '数据决策', path: '/analysis', icon: 'el-icon-s-marketing', roles: [0, 1] },
        { title: '公告运营', path: '/content', icon: 'el-icon-s-promotion', roles: [0, 1, 2] },
        { title: '资源库', path: '/resource', icon: 'el-icon-folder', roles: [0, 1] },
        { title: '用户列表', path: '/user', icon: 'el-icon-user', roles: [0, 1] },
        { title: '管理员账户', path: '/admin', icon: 'el-icon-setting', roles: [0, 1] },
        { title: '管理员日志', path: '/admin-logs', icon: 'el-icon-document', roles: [0, 1] },
        { title: '反馈中心', path: '/feedback', icon: 'el-icon-message', roles: [0, 1, 2] },
        { title: '个人信息', path: '/profile', icon: 'el-icon-user', roles: [0, 1, 2] }
      ]
    };
  },
  computed: {
    filteredMenuItems() {
      const adminLevel = getAdminLevel();
      console.log('Sidebar当前管理员级别:', adminLevel);
      
      // 0级管理员可以看到所有菜单
      if (adminLevel === 0) {
        console.log('Sidebar: 0级管理员，显示所有菜单项');
        return this.menuItems;
      }
      
      // 其他级别根据权限过滤
      const filtered = this.menuItems.filter(item => 
        item.roles && item.roles.includes(adminLevel)
      );
      
      console.log('Sidebar: 过滤后的菜单项:', filtered);
      return filtered;
    }
  },
  methods: {
    navigateTo(path) {
      this.$router.push(path);
      this.activeMenu = path;
    }
  },
  watch: {
    '$route.path'(newPath) {
      this.activeMenu = newPath;
    }
  }
}
</script>

<style scoped>
/* 导航栏容器样式 */
.sidebar {
  background-color: #001529;
  color: #fff;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

/* 导航菜单项样式 */
.nav-item {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background-color: #1a2d3f;
  border-left-color: #1890ff;
}

.nav-item.active {
  background-color: #1a2d3f;
  border-left-color: #1890ff;
}

/* 导航图标样式 */
.nav-icon {
  margin-right: 10px;
  font-size: 16px;
}

/* 确保所有菜单项间距一致 */
.nav-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 添加菜单分组样式 */
.menu-group {
  margin-top: 10px;
  margin-bottom: 10px;
}

.menu-group-title {
  padding: 8px 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
}
</style>